<script lang="ts" setup>
import { getImage,paramEncode } from '@/util/bussinessTool'
import { store } from '@/stores/allStores'
import { useRouter } from 'vue-router';
interface dataType {
    avatar: string,
    name: string,
    svcMinute: number,
    price: number,
    id:string,
}
const props = defineProps({
    data: {
        type: Object,
        default: () => {
            let Obj: dataType = {
                avatar: '',
                name: '',
                svcMinute: 0,
                price: 0,
                id: '',
            }
        },
    }
})
const router = useRouter()
function onClick() {
    let query = paramEncode({id:props.data.id})
    router.push({ name: 'selectWorker', query: query })
}
function onServiceDeatil(){
    let query = paramEncode({id:props.data.id})
    router.push({ name: 'serviceDetail', query: query })
}
</script>
<template>
    <div class="flex i-mx-20 i-my-10 i-p-10 rounded bg-white  items-center" @click="onServiceDeatil">
        <img class="avatar" :src="getImage(props.data.avatar)" />
        <div class=" box flex justify-between items-center i-ml-10">
            <div>
                <div class="i-text-14 font-bold">{{ props.data.name }}</div>
                <div class="i-text-15">{{ props.data.svcMinute }}分钟</div>
                <div class="i-text-16 font-bold">￥{{ props.data.price }}</div>
            </div>
            <van-button round :color="store.common.themeColorValue" size="small" @click.stop="onClick">选择技师</van-button>
        </div>
    </div>
</template>
<style scoped>
.box {
    width: calc(100% - 80px);
}

.avatar {
    width: 70px;
    height: 70px;
}
</style>